<template>
	<view class="container">
		<view class="header">
			<np-tab v-model="tabIndex" :tabs="tabs" :textColor="'#444444'" :bgColor="'#F8F8F8'" :height="88" @change="tabChange"></np-tab>
		</view>
		<order-item v-for="(item,index) in tabs" :key="index" ref="mescrollItem" :i="index" :index="tabIndex" :tabs="tabs"></order-item>
	</view>
</template>

<script>
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import orderItem from "./components/order-item.vue";
	export default {
		mixins: [MescrollMoreMixin],
		components: {
			orderItem
		},
		data() {
			return {
				tabIndex: 0,
				tabs: [{
					title: '已付款',
					status: 0
				}, {
					title: '待结算',
					status: 1
				}, {
					title: '已结算',
					status: 2
				}, {
					title: '已失效',
					status: 3
				}],
			};
		},
		onLoad(e) {
			if (e.status) {
				this.tabIndex = parseInt(e.status);
			}
		},
	};
</script>

<style>
	.header {
		position: fixed;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		left: 0;
		right: 0;
		z-index: 99;
		overflow: hidden;
		height: 88rpx;
		background: #F8F8F8;
	}
</style>
